<html>
<head>
  <title>Sample Using JSON Output to Populate a Simile Timeline Widget</title>
  <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css">
  <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
  <script>
var gEventSource;

function loadGDataCallback(json) {
  var entries = json.feed.entry;
  var timelinerEntries = [];
  for (var i = 0; i < entries.length; ++i) {
    var entry = entries[i];
    var when = entry["gd$when"][0];
    var start = convertFromGDataDate(when.startTime);
    var end = convertFromGDataDate(when.endTime);
    var webContent;
    var links = entry.link;
    for (var j = 0; j < links.length; ++j) {
      if (links[j].rel == "http://schemas.google.com/gCal/2005/webContent") {
        webContent = links[j];
        break;
      }
    }
    var title = webContent.title;
    var link = webContent["gCal$webContent"].url;
    var icon = webContent.href;
    var description = '<img src="' + link + '">';
    timelinerEntries.push(new Timeline.DefaultEventSource.Event(
      start,
      null, // end - when not set, event displayed with icon (looks better)
      null, // latestStart
      null, // latestEnd
      false, // not isDuration
      title,
      description,
      null, // image
      null, // link - destination when clicking on title
      icon,
      undefined, // color
      undefined  // textColor
    ));
  }
  gEventSource.addMany(timelinerEntries);
};

function zeroPad(n) {
  if (n < 0) throw new Error('n is negative');
  return (n < 10) ? '0' + n : n;
}

function convertToGDataDate(/*Date*/ date) {
  return date.getFullYear() + '-' +
         zeroPad(date.getMonth() + 1) + '-' +
         zeroPad(date.getDate());
}

function convertFromGDataDate(/*string<YYYY-MM-DD>*/ date) {
  var match = date.match(/(\d{4})-(\d{2})-(\d{2})/);
  return new Date(parseInt(match[1], 10), parseInt(match[2], 10) - 1, parseInt(match[3], 10));
}


function onLoad() {
  gEventSource = new Timeline.DefaultEventSource();

  var theme = Timeline.ClassicTheme.create();
  theme.event.bubble.width = 320;
  theme.event.bubble.height = 180;

  // centering the timeline three months previous makes it look nicer on load
  var threeMonthsAgo =
      new Date(((new Date).getTime()) - 3 * 30 * 24 * 60 * 60 * 1000);
  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    gEventSource,
        date:           threeMonthsAgo,
        width:          "90%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 140,
        theme:          theme
    }),
    Timeline.createBandInfo({
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0.2,
        eventSource:    gEventSource,
        date:           threeMonthsAgo,
        width:          "10%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

  // Atom feed for the Google Doodle calendar
  var feedUrl = "http://www.google.com/calendar/feeds/c4o4i7m2lbamc4k26sc2vokh5g%40group.calendar.google.com/public/full";

  // Google is a little fuzzy about its birthday:
  // http://www.google.com/support/bin/answer.py?answer=4866
  var startDate = new Date(1998, 9, 1);
  var endDate = new Date();

  var getParams = '?start-min=' + convertToGDataDate(startDate) +
                  '&start-max=' + convertToGDataDate(endDate) +
                  '&alt=json-in-script' +
                  '&callback=loadGDataCallback' +
                  '&max-results=5000'; // choose 5000 as an arbitrarily large number
  feedUrl += getParams;
  var scriptTag = document.createElement('script');
  scriptTag.src = feedUrl;
  document.body.appendChild(scriptTag);
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}


  </script>
  <script>
var codeDisplayed = false;
function toggleCode(el) {
  var codeblock = document.getElementById("codeblock");
  if (!codeDisplayed) {
    codeblock.style.display = '';
    el.innerHTML = "Hide the JavaScript";
  } else {
    codeblock.style.display = 'none';
    el.innerHTML = "Show me the JavaScript that loads the JSON";
  }
  codeDisplayed = !codeDisplayed;
}
  </script>
</head>

<body onload="onLoad();" onresize="onResize();">


<p>
<div id="my-timeline"
     style="height: 400px; border: 1px solid #aaa;
     font-family: Trebuchet MS, sans-serif; font-size: 85%;"
     ></div>

</p>


</body>
</html>
